import React, { useEffect, useRef, useState } from "react";
import useSocket from "../../hooks/useSocket";
import { Button, Form, Input, Modal } from "antd";
import "./socket.css";
function User() {
  const user_id = "256";
  const refdiv = useRef(null);
  const [list, setList] = useState([]);
  const { connectSocket, wsRef } = useSocket(user_id);
  const connect = () => {
    connectSocket();
    wsRef.current.onopen = () => {
      wsRef.current.send(JSON.stringify({ type: "getChatList" }));
      console.log("连接成功");
      heartFun();
    };
    wsRef.current.onmessage = (e) => {
      console.log(JSON.parse(e.data));
      const { type, data } = JSON.parse(e.data);
      if (type == "getChatList") {
        setList(data);
        setTimeout(() => {
          refdiv.current.scrollTop = 99999;
        }, 10);
      } else if (type == "addMessage") {
        wsRef.current.send(JSON.stringify({ type: "getChatList" }));
      } else if (type == "heartbeat") {
        localStorage.setItem("heartbeat", Date.now());
      }
      // setList(JSON.parse(e.data));
      // console.log(setList);
    };
    wsRef.current.onerror = () => {};
    wsRef.current.onclose = () => {};
  };
  const onFinish = (value) => {
    if (!value.text) {
      Modal.error({
        title: "不能为空",
      });
    }
    wsRef.current.send(
      JSON.stringify({
        type: "addMessage",
        data: { message: value.text, type: "text" },
      })
    );
  };
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const heartFun = () => {
    ref1.current = setInterval(() => {
      wsRef.current.send(JSON.stringify({ type: "heartbeat" }));
    }, 5000);
    ref2.current = setInterval(() => {
      const time = localStorage.getItem("heartbeat");
      const now = Date.now();
      if (now - time >= 5000) {
        Modal.error({
          title: "连接断开",
        });
        wsRef.current.close();
        connect();
      }
    }, 10000);
  };
  useEffect(() => {
    connect();
  }, []);

  return (
    <div className="main">
      <div className="headtop" ref={refdiv}>
        {list.map((item, index) => {
          if (item.user_id == user_id) {
            return (
              <div className="list1" key={index}>
                <img src={item.user_avatar} className="img9" alt="" />
                <p>{item.message}</p>
              </div>
            );
          } else {
            return (
              <div className="list2" key={index}>
                <img src={item.other_avatar} className="img9" alt="" />
                <p>{item.message}</p>
              </div>
            );
          }
        })}
      </div>
      <div className="footer">
        <Form onFinish={onFinish}>
          <Form.Item name="text">
            <Input />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">发送</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default User;
